<template>
  <div id="chartContainer" style="width: 100%; height: 400px;"></div>
</template>

<script setup>
import { onMounted, ref } from 'vue';
import * as echarts from 'echarts';

// 模拟招聘岗位数据，实际中应该从接口等获取
const jobData = ref([
  {name: '前端开发', count: 20},
  {name: '后端开发', count: 40},
  {name: '测试工程师', count: 30},
  {name: '产品经理', count: 25},
  {name: 'UI设计师', count: 18}
]);

onMounted(() => {
  const chartDom = document.getElementById('chartContainer');
  const myChart = echarts.init(chartDom);
  const option = {
    xAxis: {
      type: 'category',
      data: jobData.value.map(item => item.name)
    },
    yAxis: {
      type: 'value'
    },
    series: [
      {
        type: 'bar',
        data: jobData.value.map(item => item.count)
      }
    ]
  };
  myChart.setOption(option);
});
</script>

<style scoped>
/* 可以在这里添加样式来美化图表容器等相关元素 */
</style>